<template>
  <div :class="themeClass">
    <div class="tab_box">
      <div class="head_box">
        <select class="search_select select-first" v-model="streetId" @change="changeselect">
          <option v-for="item in streeList" :key="item.id" :value="item.id">{{ item.streetName }}</option>
        </select>
        <select class="search_select" v-model="level" @change="changeselect">
          <option :value="0">全部</option>
          <option v-for="item in levelList" :key="item" :value="item">{{ item }}</option>
        </select>
        <select class="search_select" v-model="area" @change="changeselect">
          <option :value="0">全部</option>
          <option v-for="item in areaList" :key="item" :value="item">{{ `${item} m²` }}</option>
        </select>
        <select class="search_select" v-model="capacity" @change="changeselect">
          <option :value="0">全部</option>
          <option v-for="item in capacityList" :key="item" :value="item">{{ `${item} 人` }}</option>
        </select>
        <div class="search_box">
          <div class="search_icon" @click="searchImg"></div>
          <input type="text" placeholder="请输入搜索的地点" v-model="siteName" @keyup.enter="searchImg" class="search" />
        </div>
        <div class="closeBtn" @click="close">
          <!-- <img src="../../assets/images/notice_closeW.png" alt="" srcset=""> -->
        </div>
        <!-- <input type="text" class="Search_box" /> -->
      </div>
      <div style="width: 100%;" class="table_box">
        <div class="container" style="width: 99%">
          <table>
            <thead>
              <tr>
                <th class="trClas">场所名称</th>
                <th class="trClas">级别</th>
                <th class="trClas">场所地址</th>
                <th class="trClas">场所面积(m²)</th>
                <th class="trClas">容纳人数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in Rescueteamlist" :key="item.id" :class="[item.state == 1 ? 'bg' : '', listIndex === index ? 'trBg' : '']" @click="trDbclick(item, index)">
                <td class="trClas">{{ item.siteName }}</td>
                <td class="trClas">{{ item.level }}</td>
                <td class="trClas">{{ item.address }}</td>
                <td class="trClas">{{ item.area }}</td>
                <td class="trClas">{{ item.capacity }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSettlementPointList } from '@/api/index'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      streetId: null,
      level: 0,
      area: 0,
      capacity: 0,
      listIndex: -1,
      siteName: '',
      Rescueteamlist: [],
      theme1: 'dark'
    }
  },
  computed: {
    ...mapState(['levelList', 'areaList', 'capacityList', 'theme']),
    streeList () {
      return this.$store.getters.getstree
    },
    themeClass () {
      return `theme-${this.theme1}`
    }
  },
  mounted () {
    setTimeout(() => {
      this.getlistInfo()
    }, 500)
  },
  methods: {
    changeselect () {
      this.getlistInfo()
    },
    close () {
      this.$emit('close')
    },
    // 双击行
    trDbclick (item, index) {
      this.listIndex = index
      this.$emit('trdblclick', {
        id: item.id,
        firstTag: 'yjzy',
        tag: 'yjzyAZD',
        lng: item.x,
        lat: item.y,
        ...item
      })
    },
    // 点击搜索
    searchImg () {
      console.log(this.level, this.area, this.capacity, this.siteName)
      this.getlistInfo()
    },
    // 获取安置点列表
    getlistInfo () {
      const params = {}
      if (this.streetId) params.streetId = this.streetId
      if (this.level) params.level = this.level
      if (this.area) params.area = this.area
      if (this.capacity) params.capacity = this.capacity
      if (this.siteName) params.siteName = this.siteName
      getSettlementPointList(params).then(res => {
        if (res.code === 200) {
          this.Rescueteamlist = res.result
          this.$emit('getlist', res.result)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.head_box {
  width: 100%;
  height: 3.125rem /* 50/16 */;
  display: flex;
  justify-content: space-between;
}
// .select-first{
//    @include themify($themes) {
//     border: 1px solid themed('bz-point-border-color');
//     // background:themed('bz-point-search-bgColor');
//     // box-shadow: 1px 4px 6px 0px themed('bz-point-shadow')
//   }
// }
.table_box {
  height: 100%;
}
.search_select {
  width: 4.375rem /* 70/16 */;
  height: 1.875rem /* 30/16 */;
  // background: rgba(70, 159, 255, 0.1);
  text-indent: 4px;
  @include themify($themes) {
    // border: 1px solid themed('bz-point-border-color');
    // background: themed('bz-point-search-bgColor');
    background-image: themed('select_bj');
    background-position: -3px -1px;
    background-size: 76px 40px;
    background-repeat: no-repeat;
    background-color: themed('yjzy_bg_search');
    border: none;
    outline: none;
    appearance: none;
    // border: 1px solid themed('yjzy_color_search');
    color: themed('yjzy_color_search');
    box-shadow: 1px 4px 6px 0px themed('bz-point-shadow');
  }
  outline: none;
  font-size: 12px;
  font-weight: 600;
  @include themify($themes) {
    color: themed('bz-point-select-font-color');
  }
  // color: #72e6ff;
  line-height: 24px;
}
select option {
  color: black;
}
.search_box {
  width: 9.375rem /* 150/16 */;
  height: 1.875rem /* 30/16 */;
  overflow: hidden;
  position: relative;
  @include themify($themes) {
    background: themed('bz-point-search-bgColor');
  }
  position: relative;
}
.search_icon {
  @include themify($themes) {
    background-image: themed('search_icon');
  }
  width: 11px;
  height: 11px;
  position: absolute;
  top: 9px;
  left: 6px;
  cursor: pointer;
}
.search {
  @include themify($themes) {
    // background-image: themed('bz-point-search-bg');
    color: themed('bz-point-search-font-color');
  }
  width: 100%;
  height: 30px;
  outline: none;
  font-size: 12px;
  line-height: 24px;
  background: none;
  border: none;
  margin-left: 20px;
}
.closeBtn {
  width: 3.25rem /* 52/16 */;
  height: 3.25rem /* 52/16 */;
  cursor: pointer;
  position: absolute;
  @include themify($themes) {
    background: themed('bz-point-close-bg1');
    background-repeat: no-repeat;
    top: themed('yjzy_closeBtn_position_t');
    right: themed('yjzy_closeBtn_position_r');
  }
}
.tab_box {
  width: 31.25rem /* 500/16 */;
  height: 100%;
  @include themify($themes) {
    background: themed('bz-point-bg');
  }
  background-size: 100% 100%;
  margin-left: auto;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.625rem /* 10/16 */;
  box-sizing: border-box;
  z-index: 99;
  animation: inBox 0.5s linear;
}
.tab_box .container table thead tr {
  @include themify($themes) {
    color: themed('bz-point-table-head-font');
    border-bottom: 1px solid themed('bz-point-table-color');
  }
  opacity: 0.5;
  display: flex;
  justify-content: space-around;
  width: 98%;
}
.tab_box .container table tbody {
  width: 100%;
  height: calc(100vh - 100px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px 0;
}
.trBg {
  @include themify($themes) {
    background: themed('tr_bgcolor');
    color: #fff;
  }
}
.container table {
  @include themify($themes) {
    color: themed('bz-point-table-color');
  }
  // color: #e6e6e6;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.conatiner table thead,
tbody,
tr,
th,
td {
  display: inline-block;
  cursor: pointer;
}

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  // color: #5cafd0!important;
}

.container table thead tr {
  width: 100%;
  box-sizing: border-box;
}
.container table tbody tr {
  width: 98%;
  line-height: 25px;
  box-sizing: border-box;
  padding: 0;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}

.container table tbody tr td {
  text-align: center;
}
.trClas {
  width: 20%;
  text-align: center;
}
// 滚动条整体部分
.tab_box .container table tbody::-webkit-scrollbar {
  width: 4px;
}
//滚动条里面的滑块
.tab_box .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('bz-scrollbar-thumb-color');
  }
}
//滚动条的轨道
.tab_box .container table tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('bz-scrollbar-track-color');
  }
}
input::-webkit-input-placeholder {
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  @include themify($themes) {
    color: themed('yjzy_searchInput_color');
  }
}
@keyframes inBox {
  0% {
    left: -500px;
  }
  90% {
    left: 20px;
  }
  100% {
    left: 0;
  }
}
</style>
